<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>道具预览</title>
    <link rel="stylesheet" href="Public/Plug/layui/css/layui.css" media="all" />
    <link rel="stylesheet" href="Public/Plug/layui/extend/formSelects-v4.css">
    <link rel="stylesheet" href="Public/Static/Home/css/yxlmGoods.css">

</head>
<style>


    .is-update{
        position: absolute;
        bottom: 0;
        left: 12px;
        width: 66px;
        text-align: center;
        height: 20px;
        line-height: 19px;
        background-color: #009688;
        opacity: 0.8;
        color: #ffffff;
    }

    /*!物品弹层*/
    .poppup-item {
        display: none;
        position: absolute;
        top: 0;
        left: 0;
        width: 400px;
        padding: 20px;
        background: #000;
        background: rgba(0, 0, 0, .8);
        border-radius: 5px;
        z-index: 100
    }

    .item-title {
        height: 65px
    }

    .item-title img {
        float: left;
        width: 65px;
        height: 65px;
        margin-right: 15px
    }

    .item-title h4 {
        font-size: 16px;
        font-weight: 700;
        color: #54ff00;
        line-height: 30px
    }

    .item-title .cons {
        font-size: 14px;
        color: #ca9033;
        line-height: 30px
    }

    .item-desc {
        padding: 15px 0;
        border-bottom: 1px solid #222;
        color: #b0ddff;
        font-size: 14px;
        line-height: 16px
    }

    .item-from {
        padding: 25px 0
    }

    .item-from h5 {
        font-size: 16px;
        color: #ff4200;
        margin-bottom: 20px
    }

    .item-tree {
        position: relative;
        margin-top: -40px;
        width: 100%;
        color: #54ff00
    }

    .item-tree img {
        display: block;
        margin: 0 auto
    }

    .item-depth2 img {
        width: 43px;
        height: 43px
    }

    .item-depth3 img {
        width: 35px;
        height: 35px
    }

    .item-depth4 img {
        width: 30px;
        height: 30px
    }

    .tree-lv {
        float: left;
        width: 100%;
        text-align: center
    }

    .tree-lv .line0,
    .tree-lv .line1,
    .tree-lv .line2 {
        display: block;
        background: #999;
        overflow: hidden;
        margin: 0 auto
    }

    .tree-lv .line0 {
        height: 1px
    }

    .tree-lv .line1 {
        width: 1px;
        height: 20px
    }

    .tree-lv .line2 {
        width: 1px;
        height: 18px
    }

    .tree-lv li {
        float: left
    }

    .tree-lv3 {
        margin: 0
    }

    .tree-count1 {
        width: 100%
    }

    .tree-count2 {
        width: 49.99%
    }

    .tree-count3 {
        width: 33.33%
    }

    .tree-count4 {
        width: 25%
    }

    .wraper {
        font: normal 12px/1.6em Microsoft YaHei, Tahoma, simsun;
        color: #666;
        min-width: 1240px;
        margin: 0 auto;
        background: #f7f8f8;
        overflow: hidden
    }

    .wraper .website-path {
        width: 1240px
    }

    .item-div{
        text-align: center;margin: 10px 0px 0px 10px
    }
    .item-div p {
        width: 90px;height: 30px
    }
    /*.item-depth3 img {
        width: 35px;
        height: 35px;
    }
    .item-tree img {
        display: block;
        margin: 0 auto;
    }*/

</style>

<body>
<div class="admin-main">
    <blockquote  style="display: none;"  class="layui-elem-quote">
        <button  class="layui-btn layui-btn-small add">
            <i class="layui-icon">&#xe608;</i> 添加管理员
        </button>
    </blockquote>
    <fieldset  style="display: none;"  class="layui-elem-field">
        <div class="layui-field-box">
            <table class="layui-table">
                <thead>
                <tr>
                    <th>序号</th>
                    <th>昵称</th>
                    <th>最近登录</th>
                    <th>最近ip</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <foreach name="user_info" key="k" item="vo">
                    <tr>
                        <td>1</td>
                        <td>2</td>
                        <td>3</td>
                        <td>4</td>
                        <td>
                            <a data="1" class="layui-btn layui-btn-mini layui-btn-normal edit"><i class="layui-icon">&#xe642;</i>编辑</a>
                            <a data="2" class="layui-btn layui-btn-danger layui-btn-mini del"><i class="layui-icon">&#xe640;</i>删除</a>
                        </td>

                    </tr>
                </foreach>
                </tbody>
            </table>
        </div>
    </fieldset>
    <div class="wraper">
        <div class="layout mainer">
            <!--路径导航-->
            <div class="website-path">
                <i class="icon-home"></i>
                <a href="">英雄联盟首页</a>
                <i class="icon-arrow-2"></i>
                <a href="">游戏资料</a>
                <i class="icon-arrow-2"></i>
                <a class="here">物品</a>

            </div>
            <div class="layui-row">
                <a href="{U('Prop/index')}" style="margin-left: 600px;margin-top: -110px;" class="layui-btn">返回编辑</a>
                <button id="release-btn" style="margin-left: 700px;margin-top: -145px;" class="layui-btn">全部发布</button>
            </div>
            <div class="colbox">
                <div id="pageTAB" class="pagetab">
                    <ul class="pagetab-list pagetab-list2">
                        <li class="p-list1">
                            <a class="pagetab-list-lnk" href="">英雄</a>
                        </li>
                        <li class="p-list2">
                            <a class="pagetab-list-lnk" href="">物品</a>
                        </li>
                        <li class="p-list3">
                            <a class="pagetab-list-lnk" href="">召唤师技能</a>
                        </li>
                        <li class="p-list4">
                            <a class="pagetab-list-lnk" href="">符文</a>
                        </li>
                    </ul>
                </div>

                <div style="position: relative;" class="layui-row">
                    <form class="layui-form" action="">
                        <input type="hidden" name="preview" value="1">
                        <div class="layui-col-md6">
                            <div style="margin: 20px 0px 0px 0px;">
                                <div class="layui-form-item" style="margin-left: 20px">
                                        <input lay-filter="prop-type" type="radio" name="type_id" value="" title="所有物品" checked>
                                        {foreach $type as $val}
                                        <input lay-filter="prop-type" type="radio" name="type_id"  value="{$val.alias}" title="{$val.title}">
                                        {/foreach}
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-md6">
                            <div style="margin-top: 60px;" class="layui-form-item">
                                <div class="layui-row">
                                    <div class="layui-col-md5">
                                        <label class="layui-form-label">按地图</label>
                                        <div class="layui-input-block">
                                            <select lay-filter="prop-map" name="map_id">
                                                <option value="">全地图</option>
                                                {foreach $map as $val}
                                                <option value="{$val.alias}">{$val.name}</option>
                                                {/foreach}
                                            </select>
                                        </div>
                                    </div>
                                    <div class="layui-col-md3 layui-col-md-offset1"><input type="text" name="title" value="{$title}" placeholder="关键字" autocomplete="off" class="layui-input" onchange="changeSubmit()"></div>
                                    <div class=" layui-col-md2 layui-col-md-offset1"><button class="layui-btn" lay-submit lay-filter="formDemo" id="search">立即提交</button></div>
                                </div>
                            </div>
                        </div>
                        <div style="position: absolute;top: 70px;left: 130px;">
                            <div class="layui-form-item">
                                <div class="layui-input-block layui-hide" id="child">
                                </div>
                            </div>
                        </div>
                    </form>

                </div>

                <!-- 英雄列表 -->
                <div class="clearfix info-showbox">
                    <ul id="jSearchItemDiv" class="imgtextlist">
                        {foreach $item as $val}
                        <li class="layui-col-md1 item-div" >
                            <div style="position: relative" class="item" id="{$val.id}" >
                                <img class="preview"  src="{$val.iconPath}" alt="{$val.name}" lay-data='{$val.json}' >
                                {if $val.isUpdate == 1}
                                <div class="is-update">有更新</div>
                                {/if}
                            </div>
                            <p>{$val.name}</p>
                        </li>

                        {/foreach}


                    </ul>
                </div>
                <!-- end 英雄列表 -->
            </div>

        </div>
    </div>

</div>


<div id="popPupItem" class="poppup-item" style="display: none;">
    <div id="itemFromTop">
        <div class="item-title">
            <img id="preview-img" src="" alt="">
            <h4 id="preview-name"></h4>
            <p class="cons">售价或合成费用：
                <span id="preview-price"></span>
            </p>
        </div>
        <div class="item-desc" id="preview-desc">
    </div>
        <div id="itemFromTree" class="item-from">
            <!--< h5>合成所需</h5>
            <div class="clearfix item-tree item-depth3">
                <div id="treeRoot"  class="clearfix item-tree">
                    
                </div>
                <div id="tree"  class="clearfix item-tree">
                    
                </div>
            </div> -->
        </div>
    </div>
</div>
<script type="text/javascript" src="Public/Plug/layui/layui.js"></script>
<script type="text/javascript" src="Public/Plug/layui/extend/formSelects-v4.js" charset="utf-8"></script>

<script>

    layui.use(['layer','element','form'], function() {
        var	$ = layui.jquery,
            element = layui.element,
            form = layui.form;
        var formSelects = layui.formSelects;

        $("#release-btn").click(function () {
            var url = "{U('Prop/release')}";
            var param = {
                "status": 1,
            }
            $.post(url,param,function (res) {
                //由JSON字符串转换为JSON对象
                var data = eval('(' + res + ')');
                msg = data.sMsg;
                layer.msg(msg, {
                    icon: 1,//成功的表情
                    time: 1000 //1秒关闭（如果不配置，默认是3秒）
                });

            })
        })
        //点击分类显示子分类
        form.on('radio(prop-type)', function(data){
            var type_id = data.value;
            var url = "{U('Prop/getchildType')}";
            var param = {
                'type_id': type_id,
            }

            //点击分类显示子分类
            $.get(url,param,function (res) {
                //由JSON字符串转换为JSON对象
                var data = eval('(' + res + ')');
                data = data.jData;
                var str = "";
                if (data.length > 0){
                    for (i=0;i<data.length;i++){
                        str += '<input type="radio" lay-filter="prop-ctype" name="ctype_id" value="'+data[i]['alias']+'" title="'+data[i]['title']+'">';
                    }
                }
                $("#child").html(str);
                $("#child").removeClass('layui-hide');
                $("#child").addClass('layui-show');
                form.render("radio");

            })

            $("button#search").click()

        });

        form.on('radio(prop-ctype)', function(data){
            $("button#search").click()
        });

        form.on('select(prop-map)', function(data){
            $("button#search").click()
        });

        function changeSubmit()
        {
            $("button#search").click()
        }

        //道具搜索
        form.on('submit(formDemo)', function(data){
            $("#history").html();
            $("#item-edit").removeClass('layui-show');
            $("#item-edit").addClass('layui-hide');

            var url = "{U('Prop/searchItem',['isHide'=>0])}";
            var param = data.field;
            $.get(url,param,function (res) {
                //由JSON字符串转换为JSON对象
                var data = eval('(' + res + ')');
                //道具详情
                var item = data.jData;

                var str = '';
                for (i=0;i<item.length;i++){
                    str += '<li  class="layui-col-md1 item-div" >\n' +
                        '                <div style="position: relative" class="item" id="'+item[i]['id']+'" >\n' +
                        '                    <img class="preview" src="'+item[i]['iconPath']+'" alt="'+item[i]['name']+'" lay-data="'+item[i]['json']+'" >\n' ;

                    if (item[i]['isUpdate'] == 1){
                        str += '<div class="is-update">有更新</div>\n'

                    }
                    str +=    '                </div>\n' +
                        '                <p>'+item[i]['name']+'</p>\n' +
                        '            </li>';
                }
                $("#jSearchItemDiv").html(str);


            });
            return false;

        });


        // 物品详情
        function mouseCoords(ev) {
            if (ev.pageX || ev.pageY) {
                return { x: ev.pageX, y: ev.pageY };
            }
            return {
                x: ev.clientX + document.body.scrollLeft - document.body.clientLeft,
                y: ev.clientY + document.body.scrollTop - document.body.clientTop
            }
        }

        function showPopup() {
            var moversw = $("#jSearchItemDiv img"),
                mord = 0;
            for (var i = 0, len = moversw.length; i < len; i++) {
                moversw[i].count = i;
                //鼠标移动时事件
                moversw[i].onmousemove = mouseMove;
                //事件会在鼠标指针移动到指定的对象上时发生。（颜色改变）
                moversw[i].onmouseover = function () {
                    moversw[mord].className = "";
                    moversw[this.count].className = "current";
                    mord = this.count;
                }
                //鼠标移开事件
                moversw[i].onmouseout = function () {
                    $("#popPupItem")[0].style.display = "none";
                    moversw[this.count].className = "";
                };
            };
        }
        // showPopup();

        $(document).on("mouseout",".preview",function(ev){
            $("#popPupItem")[0].style.display = "none";

        });

        $(document).on("mouseover",".preview",function(ev){
            ev = ev || window.event;
            var mousePos = mouseCoords(ev),
                popLeft = mousePos.x,
                popTop = mousePos.y,
                winW = window.innerWidth,
                winH = window.innerHeight,
                pageH = document.documentElement.clientHeight,
                tmpx = winW - popLeft;
            if (tmpx < 500) {
                popLeft = popLeft - 480;
            }
            $("#popPupItem")[0].style.left = popLeft + 20 + "px";
            $("#popPupItem")[0].style.top = popTop + 20 + "px";
            $("#popPupItem")[0].style.display = "block";
            //填充预览数据
            var img = this.getAttribute("src");
            $("#preview-img").attr('src',this.getAttribute("src"));
            var json = this.getAttribute("lay-data");
            var json =  eval('(' + json + ')');
            $("#preview-name").html(json.name);
            $("#preview-price").html(json.price);
            $("#preview-desc").html(json.description);

            var fromData = json.from_tree;
            var childProp = fromData.child
            var level = '';
            var strhtml = [];
            if(childProp.length != 0){
                console.log("yes")
                level += '<div class="tree-lv"><img src="'+fromData.iconPath+'">'+ '<i class="line1"></i></div>';
                level += treeMap(childProp, fromData.name);
                strhtml.push('<h5>合成所需</h5><div class="clearfix item-tree item-depth2">'+level+'</div>');
            }else{
                strhtml.push(null);
            }
            $("#itemFromTree").html(strhtml);

            


        });
        // tree
        function treeMap(e, name){
            var childItem = e
            if(childItem.length!=null && childItem.length != 0){
                var len = 1;
                var sttr = '<div class="tree-lv" style="width:'+(1/len)*100+'%"><i class="line0" style="width:'+(1-1/childItem.length)*100+'%"></i><ul>'
                for(var i = 0; i < childItem.length; i++){
                    var line = '';
                    if(childItem[i].child != null && childItem[i].child != 0){
                        line = '<i class="line1"></i>';
                        len = childItem.length;
                        line += treeMap(childItem[i].child, name);
                    }else{
                    }
                    sttr += '<li class="tree-count'+childItem.length+'"><i class="line2"></i><img src="'+childItem[i].iconPath+'">'+line+'</li>';
                }
                sttr+='</ul></div>';
                return sttr;
            } else {
                return false;
            }
        }


    });

</script>
</body>

</html>